
//You have to set at least three options:
	//Zoom
	//Center
	//Map Type (roadmap, terrain, sattelite)
var mapOptions = {
	//Gives the center of our map. (The first thing the user sees)
    center: new google.maps.LatLng(40.998039,-72.292126),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

//Create a new google maps map object
	///pass the map div and the options object
new google.maps.Map(document.getElementById('map'), mapOptions);

/* Part Two of tutorial */

var markerOptions = {
    //Add a position option that uses the google maps lat/lng object
    	//
    position: new google.maps.LatLng(41.002767,-72.297176)
};
//Create a marker object
var marker = new google.maps.Marker(markerOptions);
//Add it to set map
marker.setMap(map);

/* Part Three of tutorial - Adds info window for marker */

//infoWindow is an overlay like the marker but can use plaintext or html
var infoWindowOptions = {
    content: 'The bridge is Here!'
};

//Create the info window object
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
//Add event listener
	//pass the object to be listened to
	//the type of event
	//a function that executes when the event is triggered
google.maps.event.addListener(marker,'click',function(e){
  
  infoWindow.open(map, marker);
  
});


/* Part Four of tutorial - Autocomplete */
	//Part of the places library of the GMAPI
	//Lets us take advantage of googles data store
	//Landmarks, businesses, etc etc 
	//125+ different categories of places
	//Autocomplete puts one input box on our page to let users type in their requests


var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var acOptions = {
  types: ['establishment']	//establishments are places of business (NOT geo codable addresses)
};

//Create autocomplete object itself
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'),acOptions);
//bind the autocomplete object to the map.
autocomplete.bindTo('bounds',map);
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
  map: map
});

//create event listener on autocomplete object
//Places a marker on the map with an info window with the name of the place
google.maps.event.addListener(autocomplete, 'place_changed', function() {
  infoWindow.close();
  var place = autocomplete.getPlace();
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(17);
  }
  marker.setPosition(place.geometry.location);
  infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
  infoWindow.open(map, marker);
  google.maps.event.addListener(marker,'click',function(e){

    infoWindow.open(map, marker);

  });
});

/* Part Five of tutorial - Wether Layer */

var weatherLayer = new google.maps.weather.WeatherLayer({
  temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);

//An actual cloud layer on top of the map. Like you see on the wether channel.
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
